import style from "../assets/css/SE.module.css";
import Table from "./table";
import Top from "./top";

import { TabBar, Space, Swiper, SearchBar } from "antd-mobile/2x";
import { useState, useEffect } from "react";
import axios from "axios";
import {
  HistogramOutline,
  UnorderedListOutline,
  KoubeiOutline,
  CheckShieldOutline,
  TeamOutline,
} from "antd-mobile-icons";
import { useHistory } from "react-router-dom";

const SE = () => {
  // 得到history对象
  const history = useHistory();
  const [apply, setApply] = useState([]);

  // 获取Apply
  useEffect(async () => {
    const _hotApply = await axios.post(
      "http://8.136.85.238:3001/api/getAllapply"
    );
    console.log(_hotApply.data.data);
    setApply(_hotApply.data.data);
  }, []);

  return (
    <div className={style.main}>
      <div className={style.top}>
        {/* 搜索框 */}
        <Top />
      </div>

      <div className={style.body}>
        {/* 分类 */}
        <div className={style.fenlei}>
          <div className={style.flnav}>
            <div className={style.nav}>
              <HistogramOutline fontSize={24} color="#f2b502" />
              <div>排行</div>
            </div>
            <div className={style.nav}>
              <UnorderedListOutline fontSize={24} color="#1e82f9" />
              <div>分类</div>
            </div>
            <div className={style.nav}>
              <KoubeiOutline fontSize={24} color="#ff5e45" />
              <div>新游</div>
            </div>
            <div className={style.nav}>
              <CheckShieldOutline fontSize={24} color="#44c700" />
              <div>单机</div>
            </div>
            <div className={style.nav}>
              <TeamOutline fontSize={24} color="#ff5c5e" />
              <div>单机</div>
            </div>
          </div>
        </div>

        {/* 推荐apply*/}
        {apply.map((item, index) => (
          <div key={index} className={style.applies}>
            <div className={style.apply}>
              <img src={item.cover}></img>
              <div className={style.applyNav}>
                <div className={style.applyName}>{item.name}</div>
                <div className={style.applyIntro}>{item.intro}</div>
                <div className={style.count}>
                  {item.downloadCount}
                  <span className={style.memsize}>{item.memsize}</span>
                </div>
              </div>
            </div>
            <div
              className={style.applyWay}
              onClick={() => {
                history.push({ pathname: "Detail" });
              }}
            >
              免流下载
            </div>
          </div>
        ))}
      </div>

      <Table />
    </div>
  );
};

export default SE;
